<template>
  <div :class="{'daily-attendance-box': piniaSystem.getIsH5}">
    <h1 class="information-content-h5__title" v-if="piniaSystem.getIsH5">
      <h3 @click="goBack"><i-teenyicons-arrow-left-solid /> {{ title }}</h3>
      <h4 @click="openRules"><i-uil-exclamation-circle />{{ t("signIn.text5") }}</h4>
    </h1>

    <div class="check-headert-container" v-if="piniaSystem.getIsH5 && activesTotalLists[activesIndex]">
      <div class="check-headertl-container">
        <span class="check-headertl-title">{{t("newCheck.text1")}}</span>
        <span class="check-headertl-desc">{{setSignTitle(activesTotalLists[activesIndex])}}</span>
      </div>
      <div class="check-headertr-container">
        <img
          class="currencyImg"
          v-if="activesTotalLists[activesIndex].activity.signType !== 4"
          :src="piniaUserinfo.queryCurrencyInfo(activesTotalLists[activesIndex].activity.signAmountType)"
        />
        <div class="check-headertrc-desc">
          <span class="check-headertrc-right-desc">{{ activesTotalLists[activesIndex].activity.signType == 4 ? 1 : signTypeInfo(activesTotalLists[activesIndex]) }}</span>
          <span class="check-fg">/</span>
          <span class="check-headertrc-left-desc">{{ activesTotalLists[activesIndex].activity.signType == 4 ? 1 : activesTotalLists[activesIndex].conditions[0] && activesTotalLists[activesIndex].conditions[0].giftAmount }}</span>
        </div>
      </div>
    </div>

    <ZScroll class="sign-zscoll" v-if="piniaSystem.getIsH5">
      <span
        v-for="(item, index) in activesTotalLists"
        :key="item.activity.id"
        :class="{'active': index == activesIndex}"
        @click="scrollTab(index)"
      >
        <!-- {{ item.content }}
        {{ item.pic }} -->
        {{ item.title }}
      </span>
    </ZScroll>

    <!-- 签到 -->
    <div class="daily-attendance">
      <div class="daily-attendance__main">
        <h3>{{ t("signIn.text1") }}</h3>
        <ul>
          <!-- //status 1签到未领取 2 已领取 0 未签到 -->
          <li
            v-for="item in joinList.filter((im:any)=>im.sort !== '43')" :key="item.id"
            :class="{'sign-receive-not': item.status == 1, 'sign-receive': item.status == 2}"
            @click="receive(item)"
          >
            <h5>{{ item.sort }}</h5>
            <img :src="images.newchecked" alt="" v-if="item.status == 2">
            <img :src="item.currencyIcon" alt="" v-else>
            <h3>{{ Number(item.discountAmount).toFixed(2) }}</h3>
          </li>
        </ul>
      </div>
      <div class="daily-attendance__info">
        <div class="daily-attendance__condition" v-if="!piniaSystem.getIsH5 && activesTotalLists[activesIndex]">
          <h3>{{ t("newCheck.text1") }}</h3>
          <h4>
            <em>{{ setSignTitle(activesTotalLists[activesIndex]) }}</em>
            <span>
              <img class="currencyImg"
                v-if="activesTotalLists[activesIndex].activity.signType !== 4"
                :src="piniaUserinfo.queryCurrencyInfo(activesTotalLists[activesIndex].activity.signAmountType)"/>
              <div class="pc-sign-p">
                <i class="pc-sign-i1">{{ activesTotalLists[activesIndex].activity.signType == 4 ? 1 : signTypeInfo(activesTotalLists[activesIndex]) }}</i>
                <i class="pc-sign-i2">/</i>
                <i class="pc-sign-i3">{{ activesTotalLists[activesIndex].activity.signType == 4 ? 1 : activesTotalLists[activesIndex].conditions[0] && activesTotalLists[activesIndex].conditions[0].giftAmount }}</i>
              </div>
            </span>
          </h4>
        </div>
        <ul class="daily-attendance__record">
          <li v-for="item in conditions" :key="item.conditionsId" @click="continuousSign(item)">
            <div class="daily-attendance__record-title">
              {{ t("signIn.text2") }}<span>{{ day }} / {{ item.signDays }}</span>
              <em class="daily-attendance__record-bar"></em>
            </div>
            <img v-if="item.status == '2'" class="daily-attendance__record-img" :src="images.hasSigned" alt="">
            <div v-else class="daily-attendance__record-img">
              <img :src="item.currencyIcon" alt="">
              <span>{{ item.giftAmount }}</span>
            </div>
          </li>
        </ul>
        <div class="daily-attendance__tips">
          <h5>{{ t("signIn.text5") }}</h5>
          <h6>{{ t("signIn.text6") }}</h6>
          <h6>{{ t("signIn.text7") }}</h6>
        </div>
      </div>
    </div>
  </div>
  <Dialog
    v-model:visible="dialogConfig.show"
    v-model:title="dialogConfig.title"
    :width="dialogConfig.width"
    v-model:autoHeight="dialogConfig.autoHeight"
    v-model:hiddenTitle="dialogConfig.hiddenTitle"
    :headerFixed="dialogConfig.headerFixed"
  >
    <div class="rules-content-wrapper" v-if="activesTotalLists[activesIndex]">
      <div class="activityImg">
        <img
          :src="activesTotalLists[activesIndex].pic"
          alt=""
        >
      </div>
      <div class="activityInfo">
        <div class="activityContent">
          <div v-if="activesTotalLists[activesIndex].activity.activityStartTime">
            <div class="titleName">{{t('activityHome.activityTime')}}:</div>
            <div class="content-style">{{parseTime(activesTotalLists[activesIndex].activity.activityStartTime)}}-{{parseTime(activesTotalLists[activesIndex].activity.activityEndTime)}}</div>
          </div>

          <div v-if="activesTotalLists[activesIndex].activity.activityTitle">
            <div class="titleName marginTop1">{{t('activityHome.activityName')}}: </div>
            <div class="content-style">{{activesTotalLists[activesIndex].activity.activityTitle}}</div>
          </div>
          <div v-if="activesTotalLists[activesIndex].activity.gameStationName">
            <div class="titleName marginTop1">{{t('activityHome.activityChannel')}}:</div>
            <div class="content-style">{{activesTotalLists[activesIndex].activity.gameTypeName}}-{{activesTotalLists[activesIndex].activity.gameStationName}}</div>
          </div>
        </div>
        <div
          v-html="activesTotalLists[activesIndex].content"
          class="contentInfo"
        ></div>
      </div>
    </div>
  </Dialog>
</template>

<script setup lang="ts" name="DailyAttendance">
import signApi from '@/api/modules/sign';
import system from '@/store/system';
import userinfo from '@/store/userinfo';
import { parseTime } from '@/utils/format';

const global:any = getCurrentInstance()?.appContext.config.globalProperties;
const piniaSystem:any = system();
const piniaUserinfo:any = userinfo();
const { t } = useI18n();
const emits = defineEmits(['back', 'rightTab']);
const props = defineProps({
  title: {
    type: String,
    default: ""
  }
});

const images = reactive({
  hasSigned: new URL('../../assets/images/sign/hasGoChecked.svg', import.meta.url).href,
  newchecked: new URL('../../assets/images/sign/newchecked.svg', import.meta.url).href
});

const data: any = reactive({
  activity: {},
  joinList: [],
  conditions: [],
  day: 0,
  showCoinIcon: false,
  activesTotalLists: [],
  activesIndex: 0,
  dialogConfig: {
    show: false,
    type: '',
    title: "",
    headerFixed: false,
    hiddenTitle: false,
    width: 500,
    autoHeight: false
  },
});

const {
  activity,
  joinList,
  conditions,
  day,
  showCoinIcon,
  activesTotalLists,
  activesIndex,
  dialogConfig,
} = toRefs(data);

// 国际化修改
const changeLang = () => {
  activesTotalLists.value.forEach((element:any) => {
    const content = element.listContent.find((im:any)=> im.languageCode == piniaSystem.getLang.code);
    const pic = element.listPic.find((im:any)=> im.languageCode == piniaSystem.getLang.code);
    const title = element.listTitle.find((im:any)=> im.languageCode == piniaSystem.getLang.code);
    element.content = content && content.activityContent;
    element.pic = content && pic.content;
    element.title = content && title.content;
  });
}

const getNowActivitySign = () => {
  signApi.getNowActivitySign({}).then((response:any)=>{
    console.log("签到数据", response.data)
    if(response.code === 200 && response.data.length > 0){
      activesTotalLists.value = response.data;
      changeLang();
      initData();
    }
  })
}
getNowActivitySign();


const scrollTab = (index: number) => {
  activesIndex.value = index;
  initData();
}

// 初始化赋值
const initData = () => {
  joinList.value = activesTotalLists.value[activesIndex.value].joinList;
  joinList.value.forEach((element:any) => {
    const currency = piniaUserinfo.getWallet.find((im:any)=>im.currencyId == element.currencyId);
    element.currencyIcon = currency.currencyIcon;
  });
  conditions.value = activesTotalLists.value[activesIndex.value].conditions;
  conditions.value.forEach((element:any) => {
    const currency = piniaUserinfo.getWallet.find((im:any)=>im.currencyId == element.currencyId);
    element.currencyIcon = currency.currencyIcon;
  });
  if (joinList.value.length > 30) {
    joinList.value.map((sl:any) => {
      conditions.value.map((gl:any) => {
        if (String(sl.joinConditionsId) === String(gl.conditionsId)) {
          return gl.status = sl.status
        }
      })
    })
  }
  activity.value = activesTotalLists.value[activesIndex.value].activity;
  day.value = activesTotalLists.value[activesIndex.value].day;
}


// 领取
const receive = (item:any) => {
  if(item.status == 1){
    // 可领取
    addJoinSign(item.joinId);
  }
}

// 根据id签到
const addJoinSign = (joinId: string) => {
  signApi.addJoinSign({
    joinId: joinId
  }).then((response:any)=>{
    console.log(response.msg)
    if(response.code === 200){
      getNowActivitySign();
      global.message(response.msg);
    }
  })
}

// 连续签到
const continuousSign = (item: any) => {
  let specialList = joinList.value.slice(30, joinList.value.length);
  console.log(specialList)
  specialList.map((im:any) => {
    if (String(im.joinConditionsId) === String(item.conditionsId)) {
      addJoinSign(im.joinId);
    }
  })
}

// 按钮事件
const goBack = () => {
  emits('back');
}
// 按钮事件
const clickRight = () => {
  emits('rightTab');
}

const setSignTitle = (signInfo: any) => {
  if (signInfo) {
    const { signType } = signInfo.activity
    if (signType == 1) {
      showCoinIcon.value = true
      return t("signIn.text9")
    } else if (signType == 2) {
      showCoinIcon.value = true
      return t("signIn.text10")
    } else if (signType == 3) {
      showCoinIcon.value = true
      return t("signIn.text11")
    } else if (signType == 4) {
      return t("signIn.text12")
    }
  }
}

// 充值金额总数
const signTypeInfo = (signInfo:any) => {
  if (signInfo) {
    const { signType } = signInfo.activity
    const { map } = signInfo
    if (signType == 1) {
      return map.allMoney || 0
    } else if (signType == 2) {
      return map.maxMoney || 0
    } else if (signType == 3) {
      return map.betMoney || 0
    }
  }
}

// 打开规则
const openRules = () => {
  dialogConfig.value.show = true;
  dialogConfig.value.width = piniaSystem.getIsH5 ? "100%" : 500;
  dialogConfig.value.title = activesTotalLists.value[activesIndex.value].title;
}

defineExpose({
  openRules,
});

onUnmounted(()=>{
});
</script>

<style lang="scss" scoped>
@import url('./index.scss');
.z-dialog-wrapper-h5{
  background-color: red !important;
  .daily-attendance{
    display: block;
    margin-top: 0;
    .daily-attendance__main{
      width: 100%;
      ul{
        li{
          padding: 0 !important;
        }
      }
    }
    .daily-attendance__info{
      width: 100%;
      padding: var(--rem-20);
      .daily-attendance__record{
        margin: var(--rem-50) 0;
      }
    }
  }
}
</style>
